﻿@model VVA.Website.UI.Areas.Admin.Models.Product.ProductDetailModel

@Scripts.Render("~/Scripts/jqueryval")
@using (Html.BeginForm(ViewContext.RouteData.Values["action"].ToString(), "Product", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmProduct" }))
{
    Html.ValidationSummary();
    <fieldset>
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.Model.ProductID)
        <p>
            @Html.LabelFor(model => model.Model.ProductName)
            @Html.TextBoxFor(model => model.Model.ProductName, new { @class = "text-input medium-input" })
            @Html.ValidationMessageFor(model => model.Model.ProductName)
        </p>
        <p>
            @Html.LabelFor(model => model.Model.Slug)
            @Html.TextBoxFor(model => model.Model.Slug, new { @class = "text-input medium-input" })
            @Html.ValidationMessageFor(model => model.Model.Slug)
        </p>
        <p>
            @Html.LabelFor(model => model.Model.ProductImage)
            <img id="imgProductImage" src="@Model.Model.ProductImage" alt="@Model.Model.ProductName" />
            <input type="file" id="ProductImage" />
        </p>
        <p>
            @Html.LabelFor(model => model.Model.TaxonomyID)
            @Html.DropDownListFor(model => model.Model.TaxonomyID, new SelectList(Model.Categories, "TaxonomyID", "TaxonomyName"), "-- Chọn một Loại sản phẩm --", new { @class = "medium-input" })
        </p>
        <p>
            @Html.LabelFor(model => model.Model.Description)
            @Html.TextAreaFor(model => model.Model.Description, new { @class = "kendoEditor", rows = "20" })
        </p>

        <div class="tabstrip">
            <ul>
                <li class="k-state-active">@Html.LabelFor(model => model.Model.Composition)</li>
                <li>@Html.LabelFor(model => model.Model.Value)</li>
                <li>@Html.LabelFor(model => model.Model.Dosage)</li>
                <li>@Html.LabelFor(model => model.Model.Content)</li>
            </ul>
            <div>
                @Html.TextAreaFor(model => model.Model.Composition, new { @class = "kendoEditor" })
            </div>
            <div>
                @Html.TextAreaFor(model => model.Model.Value, new { @class = "kendoEditor", rows = "20" })
            </div>
            <div>
                @Html.TextAreaFor(model => model.Model.Dosage, new { @class = "kendoEditor", rows = "20" })
            </div>
            <div>
                @Html.TextAreaFor(model => model.Model.Content, new { @class = "kendoEditor", rows = "20" })
            </div>
        </div>

        <p>
            @Html.LabelFor(model => model.Model.SortOrder)
            @Html.TextBoxFor(model => model.Model.SortOrder, new { @class = "text-input medium-input numeric", type = "number" })
        </p>
        <p>
            @if (ViewContext.RouteData.Values["action"].Equals("Create"))
            {
                <a id="btnSave" class="button" href="javascript:void(0);">@HttpContext.GetGlobalResourceObject("Common", "SaveAndAddNew")</a>    
            }
            <a id="btnSaveAndClose" class="button" href="javascript:void(0);">@HttpContext.GetGlobalResourceObject("Common", "Save")</a>
            @Html.RouteLink(HttpContext.GetGlobalResourceObject("Common", "BackToList").ToString(), "Category", new { action = "Index" }, new { @class = "button" })
        </p>
    </fieldset>    
}

<script type="text/javascript">

    var Description = new TINY.editor.edit('Description', initialEditor("Model_Description"));

    var Value = new TINY.editor.edit('Value', initialEditor("Model_Value"));
    var Composition = new TINY.editor.edit('Composition', initialEditor("Model_Composition"));
    var Dosage = new TINY.editor.edit('Dosage', initialEditor("Model_Dosage"));
    var Content = new TINY.editor.edit('Body', initialEditor("Model_Content"));

    function initialEditor(textAreaId) {
        var config = {
            id: textAreaId,
            width: $("#frmProduct").width() * 95 / 100,
            height: 175,
            cssclass: 'tinyeditor',
            controlclass: 'tinyeditor-control',
            rowclass: 'tinyeditor-header',
            dividerclass: 'tinyeditor-divider',
            controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
                'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
                'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
                'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
            footer: true,
            fonts: ['Verdana', 'Arial', 'Georgia', 'Trebuchet MS'],
            xhtml: true,
            bodyid: 'editor',
            footerclass: 'tinyeditor-footer',
            toggle: { text: 'source', activetext: 'wysiwyg', cssclass: 'toggle' },
            resize: { cssclass: 'resize' }
        }

        return config;
    }

    $(document).ready(function () {
        $("#frmProduct").validate();

        $(".tabstrip").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            }
        });

        $("#ProductImage").kendoUpload({
            async: {
                saveUrl: "@Url.Action("Upload", "FileManagement")",
                saveField: "attachments",
                removeUrl: "remove",
                autoUpload: true
            },
            showFileList: false,
            success: function (e) {
                $("#imgProductImage").attr("src", "@Url.Content("~/Upload/Image/")" + e.files[0].name);
            }
        });

        $("#btnSave").live("click", function () {
            SaveProduct(false);
        });

        $("#btnSaveAndClose").live("click", function () {
            SaveProduct(true);
        });
    });

        function SaveProduct(backToList) {
            Description.post();
            Value.post();
            Dosage.post();
            Composition.post();
            Content.post();

            if ($("#frmProduct").valid()) {
                var model = {
                    ProductName: $("#Model_ProductName").val(),
                    Slug: $("#Model_Slug").val(),
                    Content: $("#Model_Content").val(),
                    Dosage: $("#Model_Dosage").val(),
                    Value: $("#Model_Value").val(),
                    Composition: $("#Model_Composition").val(),
                    Description: $("#Model_Description").val(),
                    TaxonomyId: $("#Model_TaxonomyID").val(),
                    SortOrder: $("#Model_SortOrder").val(),
                    ProductID: $("#Model_ProductID").val(),
                    ProductImage: $("#imgProductImage").attr("src")
                }

                $.ajax({
                    type: "POST",
                    url: "@Url.Action(this.ViewContext.RouteData.Values["action"].ToString(), "Product")",
                    data: model,
                    error: function (message) {
                        alert(message);
                    },
                    success: function () {
                        alert("Cất dữ liệu thành công!!!");
                        if (backToList) {
                            window.location = "@Url.Action("Index")";
                        }
                        else {
                            document.forms[0].reset();
                        }
                    }
                });
            }
        }
</script>
